import { PageHeader, Button, Input, message, Modal } from 'antd';
import React, { useState, useEffect } from 'react';

const ButtonGroup = Button.Group;
const { Search } = Input;

const { confirm } = Modal;

const MOOptions = props => {

    const { className: styles, headerOpts = {}, isMobile, dispatch, checkedRows } = props;

    const showConfirm = (name, onOk, onCancel) => {
        return confirm({
            title: `您真的要删除这些 ${name} 吗？`,
            content: '一旦删除，将无法再恢复！',
            onOk: onOk ? onOk : () => { },
            onCancel: onCancel ? onCancel : () =>{},
            okText: "确认",
            cancelText: "取消"
        });
    }

    const messageTip = async (msgTip, action) => {

        const hide = message.loading(`正在${msgTip}`);
        const response = await dispatch({
            type: action.type,
            method: action.method,
            payload: {
                value: action.payload,
                rows: checkedRows
            }
        });
        hide();
        if (response instanceof Response) {
            if (!response.ok) {
                // 未来可在此处使用自己的 错误返回信息
                message.error(`${msgTip}失败`);
                return false;
            }
        }
        message.success(`${msgTip}成功`);
        return true;
    }

    const btnClick = async item => {

        if (item.action) {
            const msgTip = item.msgTip;

            if (msgTip) {
                return messageTip(msgTip, item.action)
            }

            return await dispatch({
                type: item.action.type,
                payload: {
                    value: item.action.payload,
                    rows: checkedRows
                }
            });

        }
        else if (item.confirm) {
            const { name, action } = item.confirm
            const onOk = () => messageTip(item.msgTip, action);
            showConfirm(name, onOk);
        }
        
    }

    const titleReander = leftOpts => {

        const elements = [];
        let index = 0;
        const checkedNums = checkedRows.length;
        if (leftOpts instanceof Array) {
            leftOpts.forEach(item => {
                let btnDisplay = 'inline-block';
                if (!checkedNums && item.isHidden) {
                    btnDisplay = 'none';
                }
                if (!item.isGroup) {
                    elements.push(
                        <Button
                            key={index}
                            className={styles[item.className]}
                            {...item.args}
                            onClick={() => btnClick(item)}
                            style={{ display: btnDisplay }}
                        >
                            {!isMobile && item.text}
                        </Button>
                    );
                }
                else {
                    const _elems = [];
                    item.groups.forEach((item, i) => {
                        _elems.push(
                            <Button
                                key={i}
                                {...item.args}
                                onClick={() => btnClick(item)}
                            >
                                {!isMobile && item.text}
                            </Button>
                        );
                    });
                    elements.push(
                        <ButtonGroup
                            key={index}
                            className={styles[item.className]}
                            style={{ display: btnDisplay }}
                        >{_elems}</ButtonGroup>
                    );
                }

                index++;
            });

            elements.push(
                <small 
                    key={leftOpts.length}  
                    style={{ 
                        marginLeft: "8px", 
                        fontSize: "60%", fontWeight: 200, 
                        display: `${!checkedNums ? 'none' : 'inline-block'}`
                    }}
                >
                    已选择&nbsp;
                    <a style={{ fontWeight: 400, }} >
                        {checkedNums ? checkedNums : 0}
                    </a>
                    &nbsp;项
            </small>
            );
        }

        return <>{elements}</>
    }

    const extraRender = rightOpts => {
        
        return (
            rightOpts
            && <Search
                key="0"
                placeholder="输入搜索内容"
                onSearch={rightOpts.onSearch}
            />
        );
    }

    return (
        <>
            <PageHeader
                title={titleReander(headerOpts.left)}
                extra={extraRender(headerOpts.right)}
                className={styles.headerOptions}
            />
        </>
    );
}

export default MOOptions;